<template>
  <div class="typeComponent">
    <div :class="type=='water'?'typeShowView active':'typeShowView'" :style="layout=='cross'?' width:25%;margin-left: 0px;':'width:100%;margin-left: 0px;margin-bottom:40px;'" @click="selTypeData('water')">
      <svg-icon icon-class="water" class="water setlnglat" :style="type=='water'?'color:#bed8ff':'color:#bbbdc0'"/>
      <span>水</span>
    </div>
    <div :class="type=='electric'?'typeShowView active':'typeShowView'" :style="layout=='cross'?' width:25%;':'width:100%; margin-left: 0px;margin-bottom:40px;'" @click="selTypeData('electric')">
      <svg-icon icon-class="electricity" class="electric setlnglat" :style="type=='electric'?'color:#f1db4c':'color:#bbbdc0'"/>
      <span> 电</span>
    </div>
    <div :class="type=='cool'?'typeShowView active':'typeShowView'" :style="layout=='cross'?' width:25%;':'width:100%; margin-left: 0px;margin-bottom:40px;'" @click="selTypeData('cool')">
      <svg-icon icon-class="cold" class="cool setlnglat" :style="type=='cool'?'color:#436dd5':'color:#bbbdc0'"/>
      <span> 冷</span>
    </div>

    <div :class="type=='heat'?'typeShowView active':'typeShowView'" :style="layout=='cross'?' width:25%;':'width:100%; margin-left: 0px;margin-bottom:40px;'" @click="selTypeData('heat')">
      <svg-icon icon-class="hot" class="heat setlnglat" :style="type=='heat'?'color:#f34018':'color:#bbbdc0'"/>
      <span>热</span>
    </div>
    <div :class="type=='flow'?'typeShowView active':'typeShowView'" :style="layout=='cross'?' width:25%;':'width:100%; margin-left: 0px;margin-bottom:40px;'" @click="selTypeData('flow')">
      <svg-icon icon-class="flowRate" class="flow setlnglat" :style="type=='flow'?'color:#6af14c':'color:#bbbdc0'"/>
      <span>流量</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['type','layout'],
  name: "TypeComponent",
  methods: {
    selTypeData(value) {
      this.$emit("setType", value);
    }
  }
}
</script>

<style scoped lang="scss">
.typeComponent {
  margin-bottom: 25px;

  .typeShowView {

    height: 80px;
    border-radius: 4px;
    box-shadow: 0.075rem 0.075rem 0.425rem #131928;
    background: #151617;
    margin-left: 30px;
    line-height: 80px;
    text-align: center;
    cursor: pointer;

    span {
      color: #bfc8cd;
      font-size: 16px;
      margin-left: 20px;
    }

    &:hover {
      background: rgba(21, 22, 23, 0.71);
    }

    &:hover span {
      color: rgba(255, 255, 255, 0.62);
    }

    &:hover .electric {
      color: rgba(241, 219, 76, 0.71);
    }

    &:hover .water {
      color: rgba(190, 216, 255, 0.71);
    }

    &:hover .cool {
      color: rgba(67, 109, 213, 0.71);
    }

    &:hover .heat {
      color: rgba(243, 64, 24, 0.76);
    }

    &:hover .flow {
      color: rgba(106, 241, 76, 0.75);
    }
  }
  .active {
    border-bottom:5px solid rgba(37, 63, 175, 0.7)
  }
  .setlnglat {
    margin-top: 16px;
    margin-left: 40px;
    cursor: pointer;
    color: #bbbdc0;
  }
  .electric {
    font-size: 46px;
  }
  .water {
    font-size: 40px;
  }
  .cool {
    font-size: 44px;
  }
  .heat {
    font-size: 46px;
  }
  .flow {
    font-size: 40px;
  }
}
</style>